<template>
  <el-card class="m-8">
    <section slot="header" class="flex items-center justify-center mb-10">
      <p class="ml-10">奖池选择：</p>
      <el-select v-model="poolId" placeholder="请选择">
        <el-option
          v-for="item in poolOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button class="mr-4" type="primary" @click="changePool">确认切换</el-button>
    </section>


    <section slot="header" class="mb-4 flex items-center justify-between">
      <div>
        <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
      </div>
    </section>

    <el-table :data="tableList" align="center" border class="mt-4" stripe>
      <el-table-column label="奖池ID" prop="pool_id"></el-table-column>
      <el-table-column label="奖励名称" prop="reward_name"/>
      <el-table-column label="奖励ID" prop="prize_id"></el-table-column>
      <el-table-column label="奖励类型" prop="reward_type">
        <template slot-scope="scoped">
          {{ scoped.row.reward_type === 'prop' ? '道具' : '宠物道具' }}
        </template>
      </el-table-column>
      <el-table-column label="icon" prop="icon">
        <template slot-scope="scoped">
          <el-image v-if="scoped.row.icon" :lazy="true" :src="scoped.row.icon" class="imageStyle" fit="fill"></el-image>
        </template>
      </el-table-column>
      
      <el-table-column label="数量" prop="count"/>
      <el-table-column label="库存" prop="stock"/>
      <el-table-column label="添加时间" prop="created_at"/>

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{row}">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <cus-pagination
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="initData"
    />

    <el-dialog
      :title="isEdit?'编辑':'新增'"
      :visible.sync="addDialog2"
      lock-scroll
      width="30%"
      @close="closeAddDialog2"
    >
      <el-form ref="form" :inline="false" :model="form" :rules="rules" label-width="150px" size="normal">
        
        <el-form-item label="奖励ID" prop="prize_id">
            <!-- <el-input type="number" v-model.number="form.prize_id" placeholder="请输入"></el-input> -->
            <el-select v-model="form.prize_id" placeholder="请选择" clearable filterable>
              <el-option v-for="item in prizeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input type="number" v-model.number="form.count" placeholder="请输入数量"></el-input>
        </el-form-item>
        
        <el-form-item label="库存" prop="stock">
          <el-input type="number" v-model="form.stock" placeholder="请输入库存"></el-input>
        </el-form-item>
      </el-form>

      <section slot="footer">
        <el-button @click="addDialog2 = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </section>
    </el-dialog>
  </el-card>


</template>

<script>
import { 
  gameLotteryLadderPoolPrize,
  gameLotteryLadderPoolPrizeAdd,
  gameLotteryLadderPoolPrizeDel,
  // 下期
  gameLotteryLadderPoolTemplateDel,
  gameLotteryLadderPoolTemplateAdd,
  gameLotteryLadderPoolTemplate,
  // 奖励列表
  gameLotteryLadderPrize,
  propList
} from '@/api/compositeManagement'

// 萌宠道具
import { petPropList } from '@/api/petsManagement'

export default {
  data() {
    return {
      poolId: 1,
      poolOptions: [
        {
          value: 1,
          label: '本期奖池'
        },
        {
          value: 2,
          label: '下期奖池'
        }
      ],
      rewardType: [
        {
          value: 'prop',
          label: '道具'
        },
        {
          value: 'pet-prop',
          label: '宠物道具'
        },
      ],
      prizeList: [],
      tableList: [],
      user_code: '',
      nickname: '',
      dateList: undefined,
      listQuery: {
        type: 1,
        page: 1,
        perPage: 10,
        pool_id: undefined
      },
      meta: {
        page: 1,
        perPage: 10

      },
      total: 0,
      /* 弹出框开关 */
      addDialog: false,
      addDialog2: false,

      rejectLoading: false,
      passLoading: false,
      id: '',
      // 拒绝原因
      reject_reason: '',
      form: {
        id: undefined,
        stock: undefined,
        prize_id: undefined,
        count: undefined,
        reward_type: undefined
      },
      rules: {
        count: [{ required: true, message: '请输入', trigger: 'blur' }],
        stock: [{ required: true, message: '请输入', trigger: 'blur' }],
        prize_id: [{ required: true, message: '请输入', trigger: 'blur' }],
        reward_type: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
      isEdit: false,
      options: [],
      options1: []
    }
  },
  created() {
    this.listQuery.pool_id = this.$route.query.pool_id
    this.initData()
    this.getPrizeData()
    // this.getTableData()
    // this.getPropList()
  },
  methods: {
    async getPrizeData() {
      try {
        const { data } = await gameLotteryLadderPrize({
          page: 1,
          perPage: 1000
        })
        data.data.map(item  => {
          item.name = item.reward.name
        })
        this.prizeList = data.data
      } catch (e) {
        console.error(e)
      }
    },
    async getTableData() {
        
        const {data, code} = await petPropList({
          page: 1,
          perPage: 1000
        })
        if (code === 200) {
            this.options = data.data
        }

    },
    async getPropList() {
        const {data, code} = await propList({
          page: 1,
          perPage: 1000
        })
        if (code === 200) {
            this.options1 = data.data
        }

    },
    changePool() {
      this.listQuery.type = this.poolId
      this.initData()
    },
    
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.isEdit = true
      this.addDialog2 = true
    },
    handleAdd() {
      this.isEdit = false
      this.addDialog2 = true
    },
    handleSearch() {
      this.listQuery.page = 1
      this.initData()
    },
    async initData() {
      try {
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        }
        if(this.poolId === 1) {
          const { data } = await gameLotteryLadderPoolPrize(this.listQuery)
          this.total = data.meta.total
          this.tableList = data.list
        }else {
          const { data } = await gameLotteryLadderPoolTemplate(this.listQuery)
          this.total = data.meta.total
          this.tableList = data.list
        }
        
      } catch (e) {
        console.error(e)
      }
    },

    handleDelete(row) {
      this.$confirm('此操作不可恢复，是否继续删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if(this.listQuery.type === 1) {
          const { code, data } = await gameLotteryLadderPoolPrizeDel({
            id: row.id,
            pool_id: this.$route.query.pool_id
          })
          if (code === 200) {

            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }
        }else {
          const { code, data } = await gameLotteryLadderPoolTemplateDel({
            id: row.id,
            pool_id: this.$route.query.pool_id
          })
          if (code === 200) {

            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }
        }
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {

          for (let key in this.form) {
            this.form[key] = !this.form[key] ? undefined : this.form[key]
          }
          this.form.pool_id = this.$route.query.pool_id
          if(this.listQuery.type === 1) {
            gameLotteryLadderPoolPrizeAdd(this.form).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.addDialog2 = false
                this.initData()
              }
            })
          }else  {
            gameLotteryLadderPoolTemplateAdd(this.form).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.addDialog2 = false
                this.initData()
              }
            })
          }
        }
      })
    },
    closeAddDialog2() {
      if (this.$refs['form']) {
        this.$refs['form'].clearValidate() // 清除整个表单的校验
        this.$refs['form'].resetFields() // 清除整个表单的校验
      }
      this.form = {
        id: undefined,
        stock: undefined,
        prize_id: undefined,
        count: undefined,
      }
    },
    handleChange(val) {
      this.form.prize_id = undefined
    },
  }
}
</script>

<style scoped>
.imageStyle {
  width: 150px;
}

.input {
  width: 200px;
}
</style>
